<template>
    <div class="layout-content">
        <div class="layout-content-main">
            <Breadcrumb class="content-title mbt1">
                <BreadcrumbItem>邮件服务</BreadcrumbItem>
            </Breadcrumb>
            <div class="section">
                <div class="section-title">
                    邮件服务
                </div>
                <Row class="mbt4">
                    <Col span="6">
    
                        <Input v-model="searchEmial" placeholder="请输入邮件标题">

                        <Button slot="append" icon="ios-search" @click="search()"></Button>
                        </Input>
                    </Col>

                    <Col span="18" class="text-right">
                    <Button type="primary" size="large" @click="addEmialModal=true">新建邮件</Button>
                    </Col>
                </Row>
                <Table border :columns="columns7" :data="emialList" class="mbt4"></Table>
                <Page :total="emialListNum" show-total class="center" @on-change="changePage" :page-size="9"></Page>
                <!-- 创建邮件start -->
                <Modal v-model="addEmialModal" title="新建邮件" class="mediumSize-Modal">
                    <Form label-position="right" ref="addEmial" :model="addEmial" :rules="ruleValidate" :label-width="100">
                        <Row>                        
                            <Col span="24">
                            <FormItem label="code:" prop="mailCode">
                                <Input :maxlength="15" v-model="addEmial.mailCode"></Input>
                            </FormItem>
                            </Col>
                            <Col span="24">
                            <FormItem label="邮件标题:" prop="mailTitle">
                                <Input :maxlength="25" v-model="addEmial.mailTitle"></Input>
                            </FormItem>
                            </Col>
                            <Col span="24">
                            <FormItem label="邮件内容:" prop="mailContent">
                                <Input :maxlength="500" v-model="addEmial.mailContent" type="textarea" :autosize="{minRows: 5,maxRows: 5}" placeholder="请输入..."></Input>
                            </FormItem>
                            </Col>                           
                      </Row>                      
                    </Form>
                    <div slot="footer">
                        <Button @click="addEmialModal=false">取消</Button>
                        <Button type="primary" @click="saveEmial('addEmial')">保存</Button>
                    </div>
                </Modal>
                <!-- 创建邮件end-->

                <!-- 查看邮件弹出框start -->

                <Modal v-model="seeEmialModal" title="邮件内容" class="mediumSize-Modal">
                    <p class="emial-content">
                        {{emialContent}}
                    </p>
                </Modal>
                <!-- 查看邮件弹出框end -->

                <!-- 编辑邮件弹出框start -->
                <Modal v-model="ediEmialModal" title="邮件内容" class="mediumSize-Modal">
                    <Form label-position="right" ref="editEmial" :model="editEmial" :rules="ruleValidate" :label-width="100">
                        <Row>
                            <!-- <Col span="24">
                            <FormItem label="code:">
                                <Input></Input>
                            </FormItem>
                            </Col> -->
                            <Col span="24">
                            <FormItem label="邮件标题:" prop="mailTitle">
                                <Input :maxlength="25" v-model="editEmial.mailTitle"></Input>
                            </FormItem>
                            </Col>
                            <Col span="24">
                            <FormItem label="邮件内容:" prop="mailContent">
                                <Input :maxlength="500" v-model="editEmial.mailContent" type="textarea"  :autosize="{minRows: 5,maxRows: 5}" placeholder="请输入..."></Input>
                            </FormItem>
                            </Col>
                             
                        </Row>
                    </Form>
                    <div slot="footer">
                       <Button @click="ediEmialModal=false">取消</Button>
                       <Button type="primary" @click="saveEmial('editEmial')">保存</Button>
                    </div>

                </Modal>

                <!-- 编辑邮件弹出框end -->
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      searchEmial: "",
      emialList: [],
      emialListNum: 0,
      emialContent:'',
      pageNum: 1,
      pageSize: 9,
      addEmialModal: false,
      ediEmialModal: false,
      seeEmialModal: false,
      addEmial:{
          mailCode :'',
          mailTitle :'',
          mailContent :''
      },
      editEmial:{
          id :'',
          mailTitle :'',
          mailContent :''
      },
      ruleValidate:{
        mailCode: [{ required: true, message: "code不能为空", trigger: "blur" }],
        mailTitle: [
          { required: true, message: "邮件标题不能为空", trigger: "blur" }
        ],
        mailContent: [
          { required: true, message: "邮件内容不能为空", trigger: "blur" }
        ]
      },
      columns7: [
        {
          title: "添加时间",
          key: "createTime",
          align: "center",
          width: "300",
          render: (h, params) => {
            return new Date(parseInt(params.row.createTime))
              .toLocaleString()
              .replace(/:\d{1,2}$/, " ");
          }
        },
        {
          title: "邮件标题",
          key: "mailTitle",
          align: "center"
        },

        {
          title: "邮件内容",
          key: "emialContent",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    size: "small"
                  },
                  style: {
                    marginRight: "10px"
                  },
                  on: {
                    click: () => {
                      // this.show(params.index)
                      this.seeEmialModal = true;
                      this.seeEmial(params)
                    }
                  }
                },
                "查看"
              )
            ]);
          }
        },
        {
          title: "操作",
          key: "action",
          width: 400,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    size: "small"
                  },
                  style: {
                    marginRight: "10px"
                  },
                  on: {
                    click: () => {
                      // this.show(params.index)
                      this.ediEmialModal = true;
                      this.editEmial.id = params.row.id;
                      this.showMessage(params)
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      // this.show(params.index)
                      //this.chooseJurisdictionModal = true;
                      this.remove(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ]
    };
  },
  mounted() {
    this.getEmialList(this.pageNum,this.pageSize,'');
  },
  methods: {
    //获取邮件列表
    getEmialList(pageNum,pageSize,searchValue) {
      this.$ajax
        .post(
          "/api/emailSet/info/queryPageEmail",
          `pageNum=${pageNum}&pageSize=${pageSize}&mailTitle=${searchValue}`
        )
        .then(response => {
          if (response.data.code == 1) {
            this.emialList = response.data.resdata.list;
            this.emialListNum = response.data.resdata.total;
          } else {
            this.$Modal.error({
              title: "错误",
              content: response.data.msg
            });
          }
        })
        .catch(error => {
          this.$Modal.error({
            title: "错误",
            content: error
          });
        });
    },
    //查看邮件
    seeEmial(params){
        this.$ajax.post("/api/emailSet/info/queryEmailById",`Id=${params.row.id}`)
        .then(response=>{
           // console.log(response.data)
            if(response.data.code==1){
                this.emialContent = response.data.resdata.mailContent
            }else{
                this.$Modal.error({
                    title: "错误",
                    content: response.data.msg
                });
            }
            
        }).catch(error=>{
            this.$Modal.error({
            title: "错误",
            content: error
          });
        })
    },
    search(){
      this.getEmialList(this.pageNum,this.pageSize,this.searchEmial);
    },
    //回显邮件详信息
    showMessage(params){
        this.$ajax.post("/api/emailSet/info/queryEmailById",`Id=${params.row.id}`)
        .then(response=>{
            if(response.data.code==1){
                this.editEmial = response.data.resdata;
            }else{
                this.$Modal.error({
            title: "错误",
            content: response.data.msg
          });
            }

        }).catch(error=>{
            this.$Modal.error({
            title: "错误",
            content: error
          });
        })
    },
    //保存并验证
    saveEmial(name){
       
        this.$refs[name].validate(valid => {
        if (name == "addEmial") {
          if (valid) {
            //this.$Message.success('提交成功!');
            this.$ajax
              .post("/api/emailSet/info/insertEmail", this.addEmial)
              .then(response => {
                //console.log(response.data);
                if (response.data.code == 1) {
                  this.$Message.success(response.data.msg);
                  this.getEmialList(this.pageNum, this.pageSize,'');
                  this.addEmialModal = false;
                  //清空表单
                  this.$refs[name].resetFields();
                } else {
                  this.$Modal.error({
                    title: "错误",
                    content: response.data.msg
                  });
                }
              })
              .catch(error => {
                this.$Modal.error({
                  title: "错误",
                  content: error
                });
              });
          } else {
            //this.$Message.error("请完善表单内容!");
          }
        }else if(name == "editEmial"){
            if (valid) {
            //this.$Message.success('提交成功!');
            this.$ajax
              .post("/api/emailSet/info/updateEmail", this.editEmial)
                    
              .then(response => {
                //console.log(response.data);
                if (response.data.code == 1) {
                  this.$Message.success(response.data.msg);
                  this.getEmialList(this.pageNum, this.pageSize,'');
                  this.ediEmialModal = false;
                  
                } else {
                  this.$Modal.error({
                    title: "错误",
                    content: response.data.msg
                  });
                }
              })
              .catch(error => {
                this.$Modal.error({
                  title: "错误",
                  content: error
                });
              });
          } else {
           // this.$Message.error("请完善表单内容!");
          }
        }
      });

    },
    remove(params) {
      // this.data6.splice(index, 1);
      this.$Modal.confirm({
        title: "警告",
        content: "<p>确定要删除吗？删除后将无法恢复 !</p>",
        onOk: () => {
          //this.data6.splice(index, 1);
          this.$ajax.post("/api/emailSet/info/deleteEmail",`Id=${params.row.id}`)
          .then(response=>{
              if(response.data.code==1){
                  this.emialList.splice(params.index, 1)
              }else{
                  this.$Modal.error({
                  title: "错误",
                  content: response.data.msg
                });
              }
          }).catch(error=>{
              this.$Modal.error({
                  title: "错误",
                  content: error
                });
          })
        },
        onCancel: () => {
          this.$Message.info("点击了取消");
        }
      });
    },
    changePage(data) {
     // console.log(data);
      this.getEmialList(data,this.pageSize,this.searchEmial);
    },
    
  }
};
</script>

<style>
.emial-content {
  line-height: 30px;
  height: 323px;
  overflow: auto;
}
</style>
